<template>
  <!-- <div class="add-user"> -->
  <!-- <div class="dashboard-text">
      <div class="lef">
        <i></i>
        用户添加
      </div>
      <div
        class="return"
        @click="returnBtn"
      >
        <div class="img">
          <img src="../../icons/icon/lf.png" />
        </div>返回
      </div>
  </div>-->
  <div class="no">
    <div class="box">
      <el-form ref="form" :model="form" :rules="suForm" label-width="80px">
        <!-- 用户id -->
        <el-form-item label="用户ID：">
          <el-input v-model="form.userCode" :disabled="true" />
        </el-form-item>
        <!-- 用户账号 -->
        <el-form-item prop="userCount" label="用户账号：">
          <el-input v-model="form.userCount" />
        </el-form-item>
        <!-- 电话号码 -->
        <el-form-item prop="tel" label="电话号码：">
          <el-input v-model.trim="form.tel" placeholder="请输入" />
        </el-form-item>
        <!-- 手机号码 -->
        <el-form-item prop="phone" required label="手机号码：">
          <el-input v-model.trim="form.phone" placeholder="请输入" />
        </el-form-item>
        <!-- 会员等级 -->
        <el-form-item label="会员等级：">
          <el-select v-model="form.levelName" placeholder="请输入">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 单选框 -->
        <el-form-item prop="sex" required label="性别">
          <el-radio-group v-model.trim="form.sex">
            <el-radio label="保密" />
            <el-radio label="男" />
            <el-radio label="女" />
          </el-radio-group>
        </el-form-item>
        <!-- 生日 -->
        <div class="live">
          <el-form-item prop="birthday" required label="生日：">
            <el-col :span="6">
              <el-date-picker
                v-model.trim="form.birthday"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                format="yyyy 年 MM 月 dd 日"
              />
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11" />
          </el-form-item>
        </div>
        <!-- 城市 -->
        <el-form-item required label="城市：">
          <div class="input">
            <el-form-item prop="settlement">
              <el-select v-model="form.settlement" placeholder="省" @change="changeRegionOptions">
                <el-option
                  v-for="item in regionOptions"
                  :key="item.areaId"
                  :label="item.areaName"
                  :value="item.areaId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="domicile">
              <el-select v-model="form.domicile" placeholder="市">
                <el-option
                  v-for="item in cityOptions"
                  :key="item.areaId"
                  :label="item.areaName"
                  :value="item.areaId"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form-item>
        <!-- 职业 -->
        <el-form-item prop="jobName" required label="职业：">
          <el-select v-model="form.jobName" placeholder="请输入">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 需求 -->
        <el-form-item prop="demand" required label="需求：">
          <el-input v-model.trim="form.demand" placeholder="请输入" />
        </el-form-item>
        <!-- 资源/产品 -->
        <el-form-item prop="product" required label="资源/产品：">
          <el-input v-model.trim="form.product" placeholder="请输入" />
        </el-form-item>
        <!-- 服务 -->
        <el-form-item prop="serve" required label="服务：">
          <el-input v-model.trim="form.serve" placeholder="请输入" />
        </el-form-item>
        <!-- 新密码 -->
        <el-form-item prop="passwordA" required label="新密码：">
          <el-input v-model.trim="form.passwordA" placeholder="请输入" />
        </el-form-item>
        <!-- 确认密码 -->
        <el-form-item prop="passwordB" required label="确认密码：">
          <el-input v-model.trim="form.passwordB" placeholder="请输入" />
        </el-form-item>
        <el-button type="primary" :plain="true" @click="pushBtn('form', form)">提交</el-button>
      </el-form>
    </div>
    <div class="heg" />
  </div>
  <!-- </div> -->
</template>
<script>
import {
  editUserList,
  getuserDetail,
  choiceProvince,
  choiceCity
} from "@/api/usermanage";
import { formatDate } from "@/utils/util.js";
export default {
  data() {
    return {
      form: {},
      // 正则效验
      suForm: {
        userCount: [{ required: true, message: "请输入名称", trigger: "blur" }],
        tel: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/.test(value) == false) {
                callback(new Error("请输入正确的电话号码"));
              } else {
                ("blur");
                callback();
              }
            },
            trigger: "blur" // 这里还有blur触发方法； 如果设为none，那么只有this.$refs[formName]['validate']时才会验证
          }
        ],
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (/^1(3|4|5|6|7|8|9)\d{9}$/.test(value) == false) {
                callback(new Error("请输入正确的手机号码"));
              } else {
                ("blur");
                callback();
              }
            },
            trigger: "blur" // 这里还有blur触发方法； 如果设为none，那么只有this.$refs[formName]['validate']时才会验证
          }
        ],
        settlement: [
          { required: true, message: "请输入省", trigger: "change" }
        ],
        domicile: [
          { required: true, message: "请输入城市", trigger: "change" }
        ],
        sex: [{ required: true, message: "请输入性别", trigger: "change" }],
        jobName: [{ required: true, message: "请输入职业", trigger: "change" }],
        birthday: [
          { required: true, message: "请输入生日", trigger: "change" }
        ],
        demand: [{ required: true, message: "请输入需求", trigger: "blur" }],
        product: [
          { required: true, message: "请输入资源/产品", trigger: "blur" }
        ],
        serve: [{ required: true, message: "请输入服务", trigger: "blur" }],
        passwordA: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (/^[a-zA-Z0-9]{6,20}$/.test(value) == false) {
                callback(new Error("用户名由6-20位数字字母组成"));
              } else {
                ("blur");
                callback();
              }
            },
            trigger: "blur" // 这里还有blur触发方法； 如果设为none，那么只有this.$refs[formName]['validate']时才会验证
          }
        ],
        passwordB: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (/^[a-zA-Z0-9]{6,20}$/.test(value) == false) {
                callback(new Error("用户名由6-20位数字字母组成"));
              } else if (value !== this.form.passwordA) {
                callback(new Error("两次输入密码不一致!"));
              } else {
                ("blur");
                callback();
              }
            },
            trigger: "blur" // 这里还有blur触发方法； 如果设为none，那么只有this.$refs[formName]['validate']时才会验证
          }
        ]
      },
      options: [
        {
          value: "0",
          label: "青铜"
        },
        {
          value: "1",
          label: "白银"
        },
        {
          value: "2",
          label: "黄金"
        },
        {
          value: "3",
          label: "铂金"
        },
        {
          value: "4",
          label: "钻石"
        },
        {
          value: "5",
          label: "王者"
        }
      ],
      options2: [
        {
          value: "0",
          label: "学生"
        },
        {
          value: "1",
          label: "教师"
        },
        {
          value: "2",
          label: "采购"
        },
        {
          value: "3",
          label: "销售"
        },
        {
          value: "4",
          label: "普工"
        },
        {
          value: "5",
          label: "快递员"
        }
      ],
      regionOptions: [],
      cityOptions: []
    };
  },
  created() {
    this.getDateList();
    this.choiceProvince();
  },
  methods: {
    getDateList() {
      getuserDetail({
        userCode: this.$route.query.code
      }).then(res => {
        res.data[0].birthday = formatDate(res.data[0].birthday)
        this.form = res.data[0]
        this.$refs["form"].resetFields()
        console.log(this.form.settlement, this.form.domicile)
        choiceProvince().then(res => {
          if (res.code == 200) {
            const vm = this
            vm.regionOptions = res.data
            vm.regionOptions.forEach(item => {
              if (item.areaId == vm.form.settlement) {
                vm.form.settlement = item.areaName
                const parentId = item.areaId
                choiceCity({ parentId }).then(asd => {
                  vm.cityOptions = asd.data
                  vm.cityOptions.forEach(item2 => {
                    if (item2.areaId == vm.form.domicile) {
                      vm.form.domicile = item2.areaName
                    }
                  })
                })
              }
            })
          }
        })
      })
    },
    // 提交
    pushBtn(formName, n) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          editUserList({
            userCode: this.form.userCode,
            userCount: this.form.userCount, // 账户
            tel: this.form.tel,
            phone: this.form.phone,
            levelCode: this.form.levelName, // 会员等级 number
            sex: this.form.sex, // 性别
            birthday: this.form.birthday, // 生日
            settlement: this.form.settlement, // 省
            domicile: this.form.domicile, // 市
            demand: this.form.demand, // 需求
            jobCode: this.form.jobName, // 职业
            product: this.form.product, // 资源/产品
            serve: this.form.serve, // 服务
            password: this.form.passwordA, //密码
            userName: this.form.userName
          }).then(res => {
            this.$message({
              message: "恭喜你，这是一条成功消息",
              type: "success",
              onClose: ()=> {
                this.$router.go(-1);
              }
            })
          });
        } else {
          this.$message.error("错了哦，所有输入框不能为空");
          return false;
        }
      });
    },
    // 查询所有省
    choiceProvince() {
      choiceProvince().then(res => {
        if (res.code == 200) {
          const vm = this;
          vm.regionOptions = res.data;
        }
      });
    },
    // 查询所有市
    changeRegionOptions(parentId) {
      choiceCity({ parentId }).then(res => {
        this.cityOptions = res.data;
      });
    }
    // 返回
    // returnBtn() {
    //   this.$router.push({
    //     name: "User-manage"
    //   });
    // }
  }
};
</script>

<style lang="scss">
.add-user {
  width: 100%;
  padding-left: 29px;
  padding-right: 114px;
}
// .dashboard-text {
//   margin-top: 17px;
//   width: 100%;
//   height: 37px;
//   .lef {
//     line-height: 37px;
//     font-size: 16px;
//     font-weight: 900;
//     color: #333;
//     display: flex;
//     align-items: center;
//     justify-content: flex-start;
//     i {
//       display: inline-block;
//       width: 11px;
//       height: 20px;
//       background: #488dff;
//       border-radius: 4px;
//       margin-right: 12px;
//     }
//   }
//   .rig {
//     float: right;
//     font-size: 14px;
//     width: 76px;
//     height: 37px;
//     text-align: center;
//     line-height: 37px;
//     background: #488dff;
//     border-radius: 4px;
//     line-height: 37px;
//     display: -webkit-box;
//     display: -ms-flexbox;
//     display: flex;
//     -webkit-box-pack: center;
//     -ms-flex-pack: center;
//     justify-content: center;
//     -webkit-box-align: center;
//     -ms-flex-align: center;
//     align-items: center;
//     color: #fff;
//     cursor: pointer;
//     .img {
//       width: 20px;
//       height: 16px;
//       display: -webkit-box;
//       display: -ms-flexbox;
//       display: flex;
//       -webkit-box-align: center;
//       -ms-flex-align: center;
//       align-items: center;
//       margin-right: 9px;
//     }
//   }
// }
.heg {
  height: 200px;
  width: 100%;
}
.box {
  margin: 15px 0 0 2px;
  padding: 40px 0 10px 0;
  width: 100%;
  // height: 1500px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  .el-form {
    position: relative;
    .el-form-item {
      margin-bottom: 25px !important;
      .el-form-item__content {
        width: 630px !important;
        .el-input__icon {
          line-height: 37px;
        }
        .distpicker-address-wrapper {
          select {
            float: left;
            width: 200px !important;
            margin-right: 10px !important;
            height: 36px !important;
            line-height: 36px !important;
            border-radius: 3px;
            border: 1px solid rgba(153, 153, 153, 1);
          }
        }
      }

      // label
      .el-form-item__label {
        float: left;
        width: 377px !important;
        height: 36px !important;
        font-size: 16px !important;
        font-family: PingFangSC-Regular !important;
        font-weight: 400 !important;
        color: rgba(102, 102, 96, 1) !important;
        line-height: 36px !important;
        letter-spacing: 1px !important;
      }
      // conten
      .el-form-item__content {
        float: left;
        margin: 0 !important;
        height: 36px !important;
        width: 630px !important;
        // *
        .el-input {
          width: 444px !important;
          height: 36px !important;
          float: left !important;
          // input

          .el-input__inner {
            float: left !important;
            -webkit-appearance: none;
            background-color: #fff;
            background-image: none;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            color: #606266;
            display: inline-block;
            font-size: inherit;
            line-height: 36px !important;

            width: 444px !important;
            height: 36px !important;
            border-radius: 3px !important;
            border: 1px solid rgba(153, 153, 153, 1) !important;

            outline: 0;
            padding: 0 20px;
            -webkit-transition: border-color 0.2s
              cubic-bezier(0.645, 0.045, 0.355, 1);
            transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
            width: 200px;
          }
        }
      }
      .input {
        .el-form-item {
          display: inline-block;
          width: 35%;
          .el-input {
            width: 100% !important;
            .el-input__inner {
              width: 100% !important;
            }
          }
        }
      }
    }
    input:nth-child(2) .el-form-item {
      width: 100px !important;
    }
    // 特色部分
    .live {
      .el-form-item {
        .el-form-item__content {
          width: 214px !important;
          .el-date-editor--date {
            width: 214px !important;
            .el-input__inner {
              width: 214px !important;
            }
            .el-input__prefix {
              right: 5px;
              left: auto;
            }
          }
        }
      }
    }
    // 按钮
    button {
      position: absolute;
      bottom: -130px;
      left: 757px;
      padding: 0 !important;
      width: 100px !important;
      height: 40px !important;
      background: rgba(72, 141, 255, 1) !important;
      border-radius: 2px !important;
      color: #fff;
      span {
        display: block;
        width: 100px !important;
        height: 40px !important;
        line-height: 40px !important;
        text-align: center;
      }
    }
  }
}
</style>

